<template>
  <!-- 部门会议 -->
  <div class="box">
    <div class="departmentalStatistics_top">
      <van-row>
        <van-col
          span="8"
          :style="{fontSize:'16px'}"
          @click="time=true"
        >{{data_time}}
          <van-icon name="arrow-down" />
        </van-col>
        <van-col
          span="8"
          @click="show = true"
          :style="{fontSize:'16px'}"
        >全部
          <van-icon name="arrow-down" />
        </van-col>
        <van-col
          span="8"
          :style="{fontSize:'16px'}"
          @click="show_dept_name"
        >{{dept}}
          <van-icon name="arrow-down" />
        </van-col>
        <!-- 时间插件 -->
        <van-popup
          v-model="time"
          :safe-area-inset-bottom="true"
          :style="{width:'86%',fontSize:'14px',borderRadius:'10px'}"
          :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
        >
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="getTime_month"
            @cancel="time=false"
          />

        </van-popup>
        <van-popup
          v-model="show"
          :safe-area-inset-bottom="true"
          :style="{ height:'85%', width:'54%',fontSize:'14px',borderRadius:'10px'}"
          :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
        >
          <van-radio-group v-model="radio">
            <van-cell-group :style="{textAlign:'left'}">
              <van-cell
                title="全部"
                clickable
                @click="show_event(0)"
              >
                <van-radio
                  slot="icon"
                  :name="0"
                  :style="{marginRight:'4vw'}"
                />
              </van-cell>
              <van-cell
                :title="it.name"
                clickable
                @click="show_event(it.id)"
                v-for="(it,j) in event"
                :key="j"
              >
                <van-radio
                  slot="icon"
                  :name="j+1"
                  :style="{marginRight:'4vw'}"
                />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-popup>
        <van-popup
          v-model="technology"
          :safe-area-inset-bottom="true"
          :style="{width:'54%',fontSize:'14px',borderRadius:'10px'}"
          :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
        >
          <van-radio-group v-model="radio">
            <van-cell-group :style="{textAlign:'left'}">
              <van-cell
                :title="it.key"
                clickable
                @click="show_dept(it.value,i)"
                v-for="(it,i) in office_list"
                :key="i"
              >
                <van-radio
                  slot="icon"
                  :name="i"
                  :style="{marginRight:'4vw'}"
                />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-popup>
      </van-row>
    </div>
    <div class="departmentalStatistics_centent">
      <!-- <div class="departmentalStatistics_title clearfix">
        <span class="left departmentalStatistics_head">丽颖</span>
        <ul class="left">
          <li>赵丽颖</li>
          <li style="margin-left:10px"><span>技术部</span><span>(10)</span></li>
        </ul>
      </div> -->
      <div
        id="myChart"
        :style="{width: '100%', height: '280px',marginTop:'30px'}"
      ></div>
      <div style="border-top: 1px solid silver;">
        <p>部门的数据</p>
        <div class="flexWrap" > 
           <dl class="flexitem">
          <dt>类型</dt>
          <dd>部门奖分</dd>
          <dd>部门扣分</dd>
          <dd>平均分</dd>
          <dd>奖分次数</dd>
          <dd>扣分次数</dd>
        </dl>
        <dl class="flexitem">
          <dt>本月</dt>
          <dd
            v-for="(li,i) in thisMonth"
            :key="i"
          >{{li}}</dd>
        </dl>
        <dl class="flexitem">
          <dt>上个月</dt>
          <dd
            v-for="(ul,j) in lastMonth"
            :key="j"
          >{{ul}}</dd>
        </dl>
        <dl class="flexitem">
          <dt>趋势</dt>
          <dd
            v-for="(ol,p) in trend"
            :key="p"
          >
            <span v-if='ol>=0'>
              <img
                style="height:22px;width:18px;vertical-align: middle"
                src="@/static/img/向上.png"
              >{{ol}}</span>
            <span v-else-if="ol.toString().split('-')[1].indexOf('.')>-1">
              <img
                style="height:22px;width:18px;vertical-align: middle"
                src="@/static/img/向下.png"
              >{{parseInt(ol.toString().split('-')[1]).toFixed(2)}}</span>
            <span v-else><img
                style="height:22px;width:18px;vertical-align: middle"
                src="@/static/img/向下.png"
              >{{ol.toString().split('-')[1]}}</span></dd>
        </dl>
        </div>
       
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import {
  Icon,
  Popup,
  Row,
  Col,
  RadioGroup,
  Radio,
  Cell,
  CellGroup,
  DatetimePicker
} from "vant";
export default {
  data() {
    return {
      radio: 0,
      show: false,
      technology: false,
      time: false,
      minDate: new Date(2018, 1, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      data_time: "",
      dept: "",
      arr: [],
      event: [],
      office_list: [],
      dept_id: "",
      event_id: "",
      thisMonth: [],
      lastMonth: [],
      trend: []
    };
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [DatetimePicker.name]: DatetimePicker
  },
  created(){
     dd.biz.navigation.setTitle({
        title: "我的奖扣分" //控制标题文本，空字符串表示显示默认文本
      });
  },

  mounted() {
    this.dataTime();
    this.getEvent();
  },
  methods: {
    // 部门默认展示
    show_dept_name() {
      let arr = this.office_list;
      this.technology = true;
      for (let i = 0; i < arr.length; i++) {
        if (this.dept == arr[i].key) {
          this.radio = i;
        }
      }
    },
    // 事件筛选
    show_event(id) {
      this.event_id = id;
      this.getDeptData(this.data_time, this.dept_id, id);
      this.show = false;
    },
    // 事件数据
    async getEvent() {
        let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/Event?corpId=${corpId}&type=0`
      );
      this.event = res.data.data;
    },
    // 部门筛选
    show_dept(id) {
      this.dept_id = id;
      this.technology = false;
      this.getDeptData(this.data_time, id, this.event_id);
    },
    show_list(it) {
      this.getDeptData(this.data_time, it);
      this.technology = false;
    },
    // 当前时间
    dataTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let month, day;
      if (mm < 10) {
        month = "0" + mm;
      } else {
        month = mm;
      }
      if (dd < 10) {
        day = "0" + dd;
      } else {
        day = dd;
      }
      let year = yy + "-" + month + "-" + day;
      this.data_time = year;
      this.getDeptData(year);
    },
    // 选择时间
    getTime_month(time) {
      const d = new Date(time);
      let yy = d.getFullYear();
      let mm = this.p(d.getMonth() + 1);
      let dd = this.p(d.getDate());
      const resDate = yy + "-" + mm + "-" + dd;
      this.data_time = resDate;
      this.time = false;
      this.getDeptData(resDate);
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    async getDeptData(year, dept_id, event) {
      if (dept_id == undefined) {
        dept_id = "";
      }
      if (event == undefined || event == 0) {
        event = "";
      }
        let corpId = localStorage.getItem("custid");
      let userId = localStorage.getItem("userId");
      const res = await this.$http.get(
        `yuepoints/getDeptData?corpId=${corpId}&ddId=${userId}&date=${year}&depId=${dept_id}&event=${event}`
      );
      const {
        data: {
          depPraiseAndDeductScoreList,
          depDeductScore,
          deductTime,
          depAverageScore,
          depPraiseTime,
          depPraiseScore,
          dept
        }
      } = res.data;
      this.arr = depPraiseAndDeductScoreList;

      this.dept = dept.office_id.key;
      this.office_list = dept.office_list;
      this.thisMonth = [];
      this.lastMonth = [];
      this.trend = [];
      this.thisMonth.push(
        depPraiseScore.thisMonth,
        depDeductScore.thisMonth,
        depAverageScore.thisMonth,
        depPraiseTime.thisMonth,
        deductTime.thisMonth
      );
      this.lastMonth.push(
        depPraiseScore.lastMonth,
        depDeductScore.lastMonth,
        depAverageScore.lastMonth,
        depPraiseTime.lastMonth,
        deductTime.lastMonth
      );
      this.trend.push(
        depPraiseScore.thisMonth - depPraiseScore.lastMonth,
        depDeductScore.thisMonth - depDeductScore.lastMonth,
        depAverageScore.thisMonth - depAverageScore.lastMonth,
        depPraiseTime.thisMonth - depPraiseTime.lastMonth,
        deductTime.thisMonth - deductTime.lastMonth
      );
      this.drawLine();
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      let arr_list = this.arr;
      let data_name = [];
      let lastMonthRank = [];
      let thisMonthRank = [];
      for (let i = 0; i < arr_list.length; i++) {
        data_name.push(arr_list[i].date);
        lastMonthRank.push(arr_list[i].praiseScore);
        thisMonthRank.push(arr_list[i].deductScore.toString().split("-")[1]);
      }
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },

        grid: {
          top: 60,
          right: 70,
          bottom: 30,
          left: 60
        },
        legend: {
          top: 32,
          left: "center",
          data: ["奖分", "扣分"]
        },
        calculable: true,
        xAxis: {
          type: "category",
          data: data_name,
          axisLabel: {
            interval: 0,
            rotate: 30,
            margin: 10
          }
        },
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "奖分",
            type: "bar",
            yAxisIndex: 0,
            type: "bar",
            data: lastMonthRank
          },
          {
            name: "扣分",
            type: "bar",
            yAxisIndex: 0,
            type: "bar",
            data: thisMonthRank
          }
        ]
      });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
  p,
  dl,
  dt,
  dd {
    margin: 0px;
    text-align: left;
  }
  p {
    font-weight: 700;
    padding-top: 15px;
  }
  dt {
    font-weight: 700;
  }
  dl:last-child {
    margin-right: 0px;
  }
  .departmentalStatistics_top {
    height: 45px;
    line-height: 45px;
    background: #fff;
    color: #0072ffe0;
  }
  .departmentalStatistics_centent {
    margin: 10px 15px;
    .departmentalStatistics_title {
      .departmentalStatistics_head {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #59d1ff;
        color: #fff;
        line-height: 50px;
      }
      li:nth-child(1) {
        font-size: 16px;
      }
      li:nth-child(2) span {
        font-size: 12px;
      }
    }
  }
  span {
    display: inline-block;
  }
  .flexWrap{
    display: flex;
    justify-content: space-between;
    .felxitem {
    flex: 1;
  }
  }
  
  .clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix {
    zoom: 1;
  }
}
</style>
